<template>
	<view class="orderDetail">
		<view class="header"  >
			<view class="titleBox flex-row flex-between" >
				<image src="../../static/icon/back_arrow.png" class="back" @click="back"></image>
				<!-- payStatus (integer, optional): 支付状态 1=待支付，2=已支付，3=余额 , -->
				<view v-if='detail.status==1'>去签约</view>
				<view v-if='detail.status==2'>待支付</view>
				<view v-if='detail.status==3'>卖家确认</view>
				<view v-if='detail.status==4'>卖家过户</view>
				<view v-if='detail.status==5'>买家确认</view>
				<view v-if='detail.status==6'>已完成</view>
				<view></view>
			</view>
		</view>
		<view class="titleInfo">
			<view class="title">
				<text class="yrz"><image src='../../static/icon/yrz@2x.png'></image>已认证</text>
				<!-- status : 订单状态 1=已下单待签约，2=已签约待支付，3=已支付待确认 卖家确认，4=已确认待过户，5=买家待确认，6=已完成 客户确认完成 -->
				<text>{{detail.introduction}}</text>
			</view>
			<view class="tagList flex-row flex-between">
				<view class="tags">
				<view v-for="(i,index) in getlaber(detail.keywords) " :key="index+5">{{i}}</view>
				
				</view>
				<view class="flex-row tprice">
					<view>转让价格:</view>
					<view class="prs"><text>￥</text>{{detail.money}}</view>
				</view>
			</view>
			<!-- <view class="classList">
				<view>成果价值评估需求</view>
				<view>寻求销售渠道合作</view>
				<view>寻求转化生产合作</view>
				<view>寻求法律维权服务</view>
			</view> -->
		</view>
		<view class="itemList">
			<view class="flex-row item">
				<view class="label">专利号:</view>
				 <view class="content">{{detail.patentId}}</view>
			</view>
			<view class="flex-row item">
				<view  class="label">专利名称:</view>
				 <view  class="content">{{detail.patentName}}</view>
			</view>
			<view class="flex-row item">
				<view  class="label">领    域:</view>
				 <view  class="content">{{detail.fieldName}}</view>
			</view>
		</view>
		<view class="tl">卖家资料</view>
		<view class="itemLists">
			<view class="flex-row item">
				<view class="label">专利出让人:</view>
				 <view class="content">{{detail.sellUserName}}</view>
			</view>
			<view class="flex-row item">
				<view  class="label">联系方式:</view>
				 <view  class="content">{{detail.sellUserPhone}}</view>
			</view>
			<view class="flex-row item">
				<view  class="label">合作方式:</view>
				 <view  class="content">买断</view>
			</view>
			<view class="flex-row item">
				<view  class="label">专利成交金额:</view>
				 <view  class="content"><text class="price">￥{{detail.money}}</text></view>
			</view>
			<view class="flex-row item">
				<view  class="label">交易类型:</view>
				<!-- //orderType: 1委托平台一站式服务，2=指定代办机构，3=自主办理 , -->
				 <view  class="content" v-if='detail.orderType==1'>委托平台一站式服务(默认）</view>
				 <view  class="content" v-if='detail.orderType==2'>指定代办机构</view>
				 <view  class="content" v-if='detail.orderType==3'>自主办理</view>
			</view>
			<view class="flex-row item">
				<view  class="label">下单时间:</view>
				 <view  class="content">{{detail.addTime}}</view>
			</view>
		</view>
		<view v-if="detail.isTransfer==true">
			<view class="tl">代办机构</view>
			<view class="itemLists">
			<view class="flex-row item">
				<view class="label">负责人:</view>
				 <view class="content">{{detail.transferData.userName}}</view>
			</view>
			<view class="flex-row item">
				<view  class="label">联系方式:</view>
				 <view  class="content">{{detail.transferData.userPhone}}</view>
			</view>
			<view class="flex-row item">
				<view  class="label">合作方式:</view>
				 <view  class="content">专利过户代办</view>
			</view>
			<view class="flex-row item">
				<view  class="label">手续费:</view>
				 <view  class="content"><text class="price">￥{{detail.transferData.agencyMoney}}</text></view>
			</view>
			<view class="flex-row item">
				<view  class="label">交易类型:</view>
				 <view  class="content"><text class="price">专利过户手续费办理中</text></view>
			</view>
			<!-- <view class="flex-row item">
				<view  class="label">下单时间:</view>
				 <view  class="content">2020-06-15 16.30</view>
			</view> -->
		</view>
		</view>
		<!-- status (integer, optional): 订单状态 1=已下单待签约，2=已签约待支付，3=已支付待确认 卖家确认，
		4=已确认待过户，5=买家待确认，6=已完成 客户确认完成之后无法退款，7=已退款，8=已取消 , -->
		<view class="footer">
			<view class="dosome" v-if="detail.status == 1" @click="goline(detail.orderId)">去签约</view>
			<view class="dosome" v-if="detail.status == 2" @click="gopay(detail.orderId,detail.money)">去支付</view>
			<view class="dosome" v-if="detail.status == 3" @click="sellConfirm(detail.orderId)">卖家确认</view>
			<view class="dosome" v-if="detail.status == 4">卖家过户</view>
			<view class="dosome" v-if="detail.status == 5" @click="buyConfirm(detail.orderId)">买家确认</view>
			<view v-if="detail.status == 6">
				<view class="grey" v-if="detail.flowId" @click="geturl(detail.orderId)">查看合同</view>
				<view class="grey" v-if="type == 1" @click="isinvoice=true">开发票</view>
				<view class="dosome" @click="goeval(detail.orderId)" v-if="detail.isTransfer==true">去评价</view>
			</view>
			<!-- <view class="dosome" >已完成</view> -->
			<!--  -->
		</view>
		<uni-popup ref="uniPop" type="share">
			<uni-popup-payfor :type="msgType" @payTypes='payTypes' :title="title" :money="money":before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-payfor>
		</uni-popup>
		<passkeyborad :show="show" :money='money' @close='close' @password='password'></passkeyborad>
		<!-- 发票 -->
		<view class="layer" v-if="isinvoice == true">
			<view class="mask">
				<view class="textCenter bold font30">请填写发票内容</view>
				<view class="list">
					<text>纳税人识别号</text>
					<input v-model="ein" type="text" placeholder="请输入纳税人识别号">
				</view>
				<view class="list">
					<text>邮 箱</text>
					<input v-model="email" type="text" placeholder="请输入邮箱">
				</view>
				<view class="list">
					<text>姓 名</text>
					<input v-model="name" type="text"  placeholder="请输入姓名">
				</view>
				<view class="list">
					<text>电话号码</text>
					<input v-model="phone" type="text"  placeholder="请输入电话号码">
				</view>
				<view @click="invoice(detail.orderId)"> 
					<button type="default">提交</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import md5 from '../../api/md5.js'
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default{
		components: {
		      passkeyborad
		    },
		data(){
			return{
				iStatusBarHeight:'',
				id:'',
				detail:'',
				title: "请选择支付方式",
				packageList: [],
				msgType:'',
				orderId:'',
				show:false,
				money:'',
				passwords:'',
				payType:'',
				isinvoice:false,
				ein:'',
				name:'',
				phone:'',
				email:''
			}
		},
		mounted() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			this.getDetail()
		},
		methods:{
			getlaber(item) {
				
				return item.split(',')
			},
			getDetail(){
				this.$http.get('/orderPatent/getOrderDetailById', {
					orderId:this.id
				}).then(res => {
					if (res.code == '0') {
						this.detail = res.data;
					}
				})
			},
			goline(id){
				this.$http.get('/contract/createFlowOneStep', {
					orderId:this.id
				}).then(res => {
					if (res.code == '0') {
						this.detail = res.data;
					}
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			payTypes(id){
				console.log(id)
				this.payType = id
				if(id ==1 || id ==2){
					this.getPayType()
				}
				
			},
			//h获取密码
			password(name){
				console.log(name)
				this.passwords = md5(name)
				console.log(this.passwords)
				this.show =false
				this.balancePayOrder()
				// console.log(this.payType)
				// if(this.payType == 3){
					
				// }else if(this.payType == 1 || this.payType == 2){
				// 	this.getPayType()
				// }	
				
			},
			
			//取消订单	
			cancelOrder(id){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确认取消订单',
				    success: function (res) {
				        if (res.confirm) {
							that.$http.get('/orderPatent/cancelOrder', {
								orderId: id}).then(res => {
								if (res.code == '0') {
									uni.showToast({
										title:'取消成功',
										icon:'success',
									})
									setTimeout(function(){
										that.getOrderList()
									},1500)
								}
							})
				            
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
				
			},
			gopay(id,money){
				this.$refs.uniPop.open()
				this.orderId = id
				this.money = money
			},
			dialogClose(done) {
				
				done()
			},
			close(flag){
				console.log(flag)
				this.show = flag
			},
			//余额支付
			balancePayOrder(){
				let that = this
				this.$http.get('/orderPatent/balancePayOrder', {orderId:this.orderId,password:this.passwords}).then(res => {
					if (res.code == '0') {
						uni.showToast({
							title: res.msg,
							icon:'success',
							icon: 'none'
						});
						setTimeout(function(){
							that.getDetail()
						},1500)
					}else if(res.code==2){
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url:'../person/setPayPwd'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
					}else {
						console.log(res.data)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 微信 支付宝支付
			getPayType(){
				console.log(this.payType)
				this.$http.get('/orderPatent/payOrderInfo', {payType:this.payType,orderId:this.orderId}).then(res => {
					console.log(res.data)
					if (res.code == '0') {
						
						if(this.payType==1){
							uni.requestPayment({
							       provider: 'wxpay',
							       orderInfo: JSON.stringify(res.data.orderInfo),
							       success: function(res) {
							           console.log('success:' + JSON.stringify(res));
							       },
							       fail: function(err) {
									   
							       }
							   });
						}else if(this.payType == 2){
							uni.requestPayment({
							       provider: 'alipay',
							       orderInfo:res.data.orderInfo,
							       success: function(res) {
							           console.log('success:' + JSON.stringify(res));
									   this.getOrderList()
							       },
							       fail: function(err) {
							           console.log('fail:' + JSON.stringify(err));
																			
							       }
							   });
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			
			dialogConfirm(done) {
				done()
				this.show = true
			},
			//买家确认订单
			buyConfirm(id){
				this.$http.get('/orderPatent/buyConfirmOrder', {orderId:id}).then(res => {
					if (res.code == '0') {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
						setTimeout(function(){
							this.getOrderList()
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			// 卖家确认订单
			sellConfirm(id){
				let that = this
				that.$http.get('/orderPatent/sellConfirmOrder', {orderId:id}).then(res => {
					if (res.code == '0') {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
						setTimeout(function(){
							that.getOrderList()
						},1500)
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				})
			},
			//去评价
			goeval(id){
				uni.navigateTo({
					url:'../person/evaluation?id='+id
				})
			},
			//获取合同下载地址
			geturl(id){
				let that = this
				that.$http.get('/contract/downloadFlowDoc', {orderId:id}).then(res => {
					if (res.code == '0') {
						let url = res.data.docs[0].fileUrl
						let name = res.data.docs[0].fileName
						console.log(name)
						var dtask = plus.downloader.createDownload(url,{
							filename:"_downloads/"+name            //利用保存路径，实现下载文件的重命名
						},function(d,status){
							//d为下载的文件对象
							if(status==200){
								//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
								var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
								plus.runtime.openFile(d.filename);	   //选择软件打开文件
						    }else{	
						    	//下载失败
						    	plus.downloader.clear();        //清除下载任务
						    }
						})
						dtask.start(); 
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				})
			},
			// 发票
			invoice(id){
				let that = this
				// that.isinvoice = true
				if(!that.name){
					uni.showToast({title:'请输入收件人姓名',icon:'none'});
					return ;
				}
				if(!that.phone){
					uni.showToast({title:'请输入收件人电话号码',icon:'none'});
					return ;
				}
				if(!that.email){
					
					uni.showToast({title:'请输入邮箱',icon:'none'});
					return ;
				}else if(that.email){
					var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
					if (!regEmail.test(that.email)) {
						console.log(1)
						uni.showToast({title:'邮箱格式不正确',icon:'none'});
						// this.email= ''
					}
				}
				
				that.$http.post('/orderPatent/makeOutInvoice', 
				{
					orderId:id,
					ein:that.ein,
					email:that.email,
					name:that.name,
					phone:that.phone
				},
				).then(res => {
					if (res.code == '0') {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
						setTimeout(function(){
							that.isinvoice = false
							uni.switchTab({
								url:'../tab/person'
							})
						},1500)
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				})
			}
			
			
		}
	}
</script>

<style scoped lang="scss">
	.orderDetail{
		padding-bottom: 160upx;
		.footer{
			background: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 690upx;
			padding: 30upx;
			text-align: right;
			border-top: 1upx solid #f7f7f7;
			.grey ,.dosome{
				display: inline-flex;
				font-size: 28upx;
				color: #666666;
				border:1px solid rgba(102,102,102,1);
				padding: 10upx 20upx;
				margin-right: 16upx;
				border-radius: 8upx;
				
			}
			.dosome{
				color: #fd580a;
				border: 1px solid #fd580a;
			}
		}
		.tl{
			padding: 40upx 30upx 30upx;
			font-size: 32upx;
			color: #22222A;
			font-weight: bold;
		}
		.header{
			position: fixed;
			// height: 80upx;
			background: #fff;
			top: 0;
			left: 0;
			border-bottom: 1upx solid rgba(230,230,230,1);
			overflow: hidden;
			padding: 40upx 0 20upx 0;
			.titleBox {
				// position: absolute;
				// z-index: 99;
				width: 690upx;
				padding:0 24upx;
				font-size: 32upx;
				color: #22222A;
				font-weight: 700;
				.back {
					width: 24upx;
					height: 40upx;
				}
				.star {
					width: 40upx;
					height: 40upx;
				}
			}
		}
		.itemList{
			background: #fff;
				padding:0 30upx;
				// margin-bottom: 20upx;
				.item{
					padding: 30upx 0;
					border-bottom: 1upx solid #eeeeee;
					font-size: 26upx;
					color: #22222A;
					&:last-child{
						border-bottom: none;
					}
					.label{
						width: 120upx;
					}
					.content{
						padding-left: 30upx;
					}
				}
		}
		.itemLists{
			background: #fff;
				padding:0 30upx;
				// margin-bottom: 20upx;
				.item{
					padding: 30upx 0;
					border-bottom: 1upx solid #eeeeee;
					font-size: 30upx;
					color: #22222A;
					&:last-child{
						border-bottom: none;
					}
					.label{
						width: 200upx;
					}
					.content{
						padding-left: 30upx;
						.price{
							color: #FD580A;
						}
					}
				}
		}
		.titleInfo{
			background: #fff;
			padding: 120upx 30upx 0;
			// margin-bottom: 20upx;
			.title{
				font-size: 34upx;
				color: #22222A;
				font-weight: bold;
				.yrz{
					// width:112upx;
					// height:38upx;
					padding: 4upx 10upx;
					background:rgba(253,88,10,1);
					border-radius:8upx;
					text-align: center;
					line-height: 38upx;
					font-size: 24upx;
					color: #fff;
					margin-right: 20upx;
					image{
						width: 26upx;
						height: 22upx;
						vertical-align: middle;
						margin-right: 6upx;
					}
				}
				
			}
			.tagList {
				padding-top: 23upx;
				padding-bottom: 58upx;
				.tags{
					width: 440upx;
					> view {
						display: inline-flex;
						font-size: 22upx;
						color: #fd580a;
						border: 1upx solid #fd580a;
						padding: 5upx 10upx;
						margin-right: 16upx;
						border-radius: 8upx;
					}
				}
				.tprice{
					font-size: 30upx;
					color: #22222A;
					align-items: center;
					.prs{
						font-size: 36upx;
						color: #fd580a;
						font-weight: bold;
						>text{
							font-size: 28upx;
						}
					}
				}
			}
			.classList {
				color: #38d214;
				font-size: 26upx;
				> view {
					display: inline-flex;
					background: url(../../static/icon/green.png) no-repeat left 13upx;
					background-size: 8upx 8upx;
					padding-left: 20upx;
					margin-right: 37upx;
					padding-bottom: 20upx;
					&:first-child {
						margin-left: 0;
					}
				}
			}
		}
		.layer{
			position: fixed;
			width: 100%;
			height: calc(100vh);
			left: 0;
			top: 0;
			background: rgba(0,0,0,.4);
			z-index: 20;
		}
		
		.mask{
			position: fixed;
			z-index: 50;
			width: 90%;
			left: 5%;
			top: 30%;
			border-radius: 20upx;
			background: #FFFFFF;
			padding-top: 30upx ;
			.list{
				padding: 30upx;
				display: flex;
				text{
					width: 200upx;
					
				}
			}
			
		}
		
	}
</style>
